<!DOCTYPE html>
<html>
<head>
	<title>demo</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<link rel="stylesheet" type="text/css" href="./css/style.css">
	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

	<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
	<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	
	<link rel="stylesheet" type="text/css" href="./css/swiper.css">

	<script src="./js/jquery.js"></script>
	<script type="text/javascript" src="./js/touch.min.js"></script>
    <script type="text/javascript" src="./js/cat.touchjs.js"></script>
    <script type="text/javascript" src="./js/swiper.js"></script>
    <script type="text/javascript" src="./js/html2canvas.min.js"></script>
</head>
<body>
	<div class="container-fluid" id="cont">
		<div class="row pic-bg">
			<div class="pic-bg-cont" style="padding-top: 20%;">
				<img id="float-img" src="./img/2.jpg">
				<div class="menu">
					<ul class="menu-list">
						<div class="child-menu">
							<li>
								<input id="file" type="file"  onchange="upload('#file');" accept="image/*" capture="camera" src="./img/2.jpg" />
								<img class="op-btn" id="file-btn" src="./img/cap.jpg">
							</li>
							<li><img id="share" class="op-btn" src="./img/fen.jpg"></li>
							<li><img class="op-btn" src="./img/de.jpg"></li>
						</div>
						<li><img class="op-btn" src="./img/menu.jpg" id="menu-button"></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="row img-cont">
			<div class="col-xs-12 img-cont-list swiper-container">
				<ul class="img-list swiper-wrapper">
					<li class="th-img swiper-slide" ><img src="./img/1.jpg"><div class="meng"><span class="meng-del">X</span></div></li>
					<li class="th-img swiper-slide" ><img src="./img/2.jpg"><div class="meng"><span class="meng-del">X</span></div></li>
					<li class="th-img swiper-slide" ><img src="./img/3.jpg"><div class="meng"><span class="meng-del">X</span></div></li>
					<li class="th-img swiper-slide" ><img src="./img/1.jpg"><div class="meng"><span class="meng-del">X</span></div></li>
					<li class="th-img swiper-slide" ><img src="./img/2.jpg"><div class="meng"><span class="meng-del">X</span></div></li>
					<li class="th-img swiper-slide" ><img src="./img/3.jpg"><div class="meng"><span class="meng-del">X</span></div></li>
					<li class="th-img swiper-slide" ><img src="./img/1.jpg"><div class="meng"><span class="meng-del">X</span></div></li>
					<li class="th-img swiper-slide" ><img src="./img/2.jpg"><div class="meng"><span class="meng-del">X</span></div></li>
				</ul>
			</div>
		</div>
		<div class="row img-gather">
			<div class="col-xs-12 img-gather-mas">
				<ul class="img-gather-cont">
					<li class="th-gather"><img src="./img/1.jpg"><div class="gather-meng"><span class="meng-inc">+</span></div></li>
					<li class="th-gather"><img src="./img/4.jpg"><div class="gather-meng"><span class="meng-inc">+</span></div></li>
					<li class="th-gather"><img src="./img/3.jpg"><div class="gather-meng"><span class="meng-inc">+</span></div></li>
					<li class="th-gather"><img src="./img/1.jpg"><div class="gather-meng"><span class="meng-inc">+</span></div></li>
					<li class="th-gather"><img src="./img/2.jpg"><div class="gather-meng"><span class="meng-inc">+</span></div></li>
					<li class="th-gather"><img src="./img/3.jpg"><div class="gather-meng"><span class="meng-inc">+</span></div></li>
					<li class="th-gather"><img src="./img/1.jpg"><div class="gather-meng"><span class="meng-inc">+</span></div></li>
					<li class="th-gather"><img src="./img/2.jpg"><div class="gather-meng"><span class="meng-inc">+</span></div></li>
					<li class="th-gather"><img src="./img/3.jpg"><div class="gather-meng"><span class="meng-inc">+</span></div></li>
					<li class="th-gather"><img src="./img/1.jpg"><div class="gather-meng"><span class="meng-inc">+</span></div></li>
					<li class="th-gather"><img src="./img/2.jpg"><div class="gather-meng"><span class="meng-inc">+</span></div></li>
					<li class="th-gather"><img src="./img/3.jpg"><div class="gather-meng"><span class="meng-inc">+</span></div></li>
					<li class="th-gather"><img src="./img/1.jpg"><div class="gather-meng"><span class="meng-inc">+</span></div></li>
					<li class="th-gather"><img src="./img/2.jpg"><div class="gather-meng"><span class="meng-inc">+</span></div></li>
					<li class="th-gather"><img src="./img/3.jpg"><div class="gather-meng"><span class="meng-inc">+</span></div></li>
				</ul>
			</div>
		</div>
		<div class="row img-list-switch">
			<div class="col-xs-12" style="text-align:center;">
				<span id="more" style="color:#ccc;">==更多作品==</span>
			</div>
		</div>
	</div>

	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

	<!-- My Script -->
	<script type="text/javascript" src="./js/index.js"></script>

</body>
</html>